<!DOCTYPE html>
<html>
<!-- 	4.制作4个嵌套DIV ，要求：
	      1.每个父DIV尺寸必须大于子DIV
	      2.实现每个DIV在父DIV正中间
	      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
	      4.通过最底层DIV，打印每层父DIV，如：
		1级父元素为（），1级父节点为（）
		2级父元素为（），2级父节点为（）
		.... -->
		<!-- 5.查找每个DIV的子元素和子节点 -->
	<head>
		<meta charset="utf-8">
		<title>第四题页面</title>
		</style>
	</head>
	<body>
		<div id="divlayer1" style="width: 400px;height: 400px;background-color: burlywood; text-align: center;" >
			<p>图片</p><img src="" >
			<div id="divlayer2" style="width: 300px;height: 300px;background-color: blueviolet; text-align: center; margin: auto;">
				<a href='主页面.html'>主页面</a>
				<div id="divlayer3" style="width: 200px;height: 200px;background-color: rosybrown; text-align: center; margin: auto;">
					<p>有你的黑夜</p>
					<div id="divlayer4" style="width: 100px;height: 100px;background-color: greenyellow; text-align: center; margin: auto;">
						我是DIV
					</div>
				</div>
			</div>
		</div>
		<br/>
		<button type="button" onclick="getdparentElement();">获取父元素</button>
		<button type="button" onclick="getparentNode();">获取父节点</button>
		<!-- 5.查找每个DIV的子元素和子节点 -->
		<button type="button" onclick="getSon();">获取子元素子节点</button>
		<br/><button type="button" onclick="Mainpage();">跳转回主页面</button>
	</body>
	<script type="text/javascript">
		function getdparentElement(){
			var divlayer4 = document.getElementById('divlayer4')
			console.log(divlayer4.parentElement)
			console.log(divlayer4.parentElement.parentElement)
			console.log(divlayer4.parentElement.parentElement.parentElement)
			console.log(divlayer4.parentElement.parentElement.parentElement.parentElement)
			console.log(divlayer4.parentElement.parentElement.parentElement.parentElement.parentElement)
			console.log(divlayer4.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement)
			
		}
		function getparentNode(){
			var divlayer4 = document.getElementById('divlayer4')
			console.log(divlayer4.parentNode)
			console.log(divlayer4.parentNode.parentNode)
			console.log(divlayer4.parentNode.parentNode.parentNode)
			console.log(divlayer4.parentNode.parentNode.parentNode.parentNode)
			console.log(divlayer4.parentNode.parentNode.parentNode.parentNode.parentNode)
			console.log(divlayer4.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode)
		}
		<!-- 5.查找每个DIV的子元素和子节点 -->
		function getSon(){
			var divlayer1 = document.getElementById('divlayer1')
			var divlayer2 = document.getElementById('divlayer2')
			var divlayer3 = document.getElementById('divlayer3')
			var divlayer4 = document.getElementById('divlayer4')
			console.log(divlayer1.children)
			console.log(divlayer2.children)
			console.log(divlayer3.children)
			console.log(divlayer4.children)
			console.log('******************')
			console.log(divlayer1.childNodes)
			console.log(divlayer2.childNodes)
			console.log(divlayer3.childNodes)
			console.log(divlayer4.childNodes)
		}
		function Mainpage(){
			location.href = '主页面.html';
		}
	</script>
</html>
